
.radio{
    width: 100%;
    background-color: #f5f5f5;
}

.radio-body{
    width: 982px;
    background-color: #fff;
    margin: auto;
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    padding: 40px;
}

.list{
    width: 100%;
    ul{
        overflow: hidden;
        margin-left: -33px;
        li{
            float: left;
            width: 70px;
            height: 72px;
            margin: 0 0 25px 33px;
            a{
                display: block;
                width: 70px;
                height: 70px;
                font-size: 12px;
                color: #888;
                text-align: center;
                &:hover{
                    background: url('radio_bg.png') no-repeat 0 0;
                }
                span{
                    display: block;
                    width: 48px;
                    height: 48px;
                    margin: 2px 11px 0 11px;
                    background-repeat: no-repeat;
                    background-position: 0 0;
                }
            }
        }

        li:nth-child(1){
            a>span{
                background-image: url('radio01.png');
            }
        }

        li:nth-child(2){
            a>span{
                background-image: url('radio02.png');
            }
        }

        li:nth-child(3){
            a>span{
                background-image: url('radio03.png');
            }
        }

        li:nth-child(4){
            a>span{
                background-image: url('radio04.png');
            }
        }


        li:nth-child(5){
            a>span{
                background-image: url('radio05.png');
            }
        }

        li:nth-child(6){
            a>span{
                background-image: url('radio06.png');
            }
        }

        li:nth-child(7){
            a>span{
                background-image: url('radio07.png');
            }
        }

        li:nth-child(8){
            a>span{
                background-image: url('radio08.png');
            }
        }

        li:nth-child(9){
            a>span{
                background-image: url('radio09.png');
            }
        }

        li:nth-child(10){
            a>span{
                background-image: url('radio10.png');
            }
        }

        li:nth-child(11){
            a>span{
                background-image: url('radio11.png');
            }
        }

        li:nth-child(12){
            a>span{
                background-image: url('radio12.png');
            }
        }

        li:nth-child(13){
            a>span{
                background-image: url('radio13.png');
            }
        }


        li:nth-child(14){
            a>span{
                background-image: url('radio14.png');
            }
        }

        li:nth-child(15){
            a>span{
                background-image: url('radio15.png');
            }
        }

        li:nth-child(16){
            a>span{
                background-image: url('radio16.png');
            }
        }

        li:nth-child(17){
            a>span{
                background-image: url('radio17.png');
            }
        }

        li:nth-child(18){
            a>span{
                background-image: url('radio18.png');
            }
        }

        










    }
}

.radio-t{
    width: 100%;
    overflow: hidden;
    &>div{
        width: 426px;
        ul{
            width: 100%;
            border: 1px solid #e2e2e2;
            border-top: none;
            li{
                width: 100%;
                height: 60px;
                padding: 10px 0;
                &:hover{
                    background-color: #eee;
                }

                a:nth-child(1){
                    position: relative;
                    float: left;
                    width: 40px;
                    height: 40px;
                    margin-left: 20px;
                    i{
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        width: 22px;
                        height: 22px;
                        display: none;
                        background: url('iconall.png') 0 -85px;
                    }
                }

                &>div{
                    float: left;
                    width: 254px;
                    height: 40px;
                    margin: 1px 0 0 10px;
                    p{
                        white-space: nowrap; 
                        overflow:hidden;
                        text-overflow:ellipsis;
                        font-family: Arial, Helvetica, sans-serif;
                        &:hover{
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    p:first-child{
                        color: #333;
                        font-size: 13px;
                        margin-bottom: 5px;
                    }
                    p:last-child{
                        display: inline;
                        color: #999;
                        font-size: 12px;
                    }
                }

                a:nth-child(3){
                    float: right;
                    width: 62px;
                    height: 18px;
                    border: 1px solid #999;
                    margin-top: 12px;
                    margin-right: 28px;
                    padding: 0 6px;
                    color: #999;
                    font-size: 12px;
                    &:hover{
                        color: black;
                        border: 1px solid #000;
                    }
                }

                span{
                    float: right;
                    margin-top: 15px;
                    margin-right: 25px;
                    width: 100px;
                    height: 8px;
                    background: url('table.png') 0 -240px;
                    &>i{
                        display: block;
                        height: 100%;
                        padding-left: 4px;
                        background: url('table.png') right -318px;
                        &>i{
                            display: block;
                            width: 100%;
                            height: 100%;
                            margin-left: -4px;
                            background: url('table.png') 0 -304px;
                        }
                    }
                }

            }

            li:nth-child(even){
                background-color: #eee;
            }

        }

    }

    &>div:nth-child(1){
        float: left;
    }

    &>div:nth-child(2){
        float: right;
    }

}


.radio-top{
    width: 100%;
    height: 40px;
    border-bottom: 2px solid #c20c0c;
    a{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        &:hover{
            text-decoration: underline;
        }
    }
    a:nth-child(1){
        float: left;
        font-size: 27px;
        color: #333;
        i{
            display: inline-block;
            width: 24px;
            height: 24px;
            font-size: 27px;
            color: #333;
            text-align: center;
            line-height: 24px;
        }
    }
    a:nth-child(2){
        float: right;
        color: #666;
        font-size: 12px;
        line-height: 50px;
    }
}

.radio-body{

    .radb{
        width: 100%;
        margin-top: 35px;
        ul{
            overflow: hidden;
            width: 100%;
            li{
                float: left;
                width: 435px;
                height: 161px;
                border-bottom: 1px solid #e7e7e7;
                padding: 20px 0;
                margin-right: 15px;
                &>a{
                    float: left;
                    width: 120px;
                    height: 120px;
                    background-color: green;
                    img{
                        width: 120px;
                        height: 120px;
                    }
                }

                div{
                    float: left;
                    width: 295px;
                    height: 64px;
                    margin: 15px 0 0 15px;
                    h3{
                        float: left;
                        font-size: 18px;
                        width: 100%;
                        margin: 16px 0 20px 0;
                        a{
                            color: #333;
                        }
                    }
                    p{
                        float: left;
                        color: #999;
                        font-size: 12px;
                        width: 100%;
                    }
                }

            }
        }

        .dropBot{
            border-bottom: none;
        }
    }

}

